<template>
  <div id="addshop">
    <Header>
      <el-button size="small" type="primary" @click="activity"
        >新建活动</el-button
      >
    </Header>
    <Header :type="'screening'" @tag="getList" @reset="reset">
      <div class="head-tit">
        内容筛选
      </div>
      <div class="head-operation">
        <span class="head-label">
          选择状态：
        </span>
        <el-select
          v-model="select1"
          size="small"
          class="head-input"
          placeholder="下单时间"
        >
          <el-option
            v-for="items in optionList"
            :key="items.id"
            :label="items.name"
            :value="items.id"
          >
          </el-option>
        </el-select>
        <span class="head-label">
          活动名称：
        </span>
        <el-input
          v-model="input"
          placeholder="请输入名称"
          size="small"
          class="head-input"
        >
        </el-input>
      </div>
      <div class="head-operation">
        <span class="head-label">
          选择时间：
        </span>
        <div class="head-time">
          <el-date-picker
            v-model="timeval"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            align="right"
            style="width:100%;"
            size="small"
          >
          </el-date-picker>
        </div>
      </div>
    </Header>

    <Main :data="listcode" :footer-lock="totals > 10">
      <el-table-column
        label="活动名称"
        align="center"
        property="name"
      ></el-table-column>
      <el-table-column label="活动封面" align="center">
        <template slot-scope="scope">
          <img
            :src="Url + scope.row.pic + $store.state.imgRotate"
            width="80px"
          />
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.status == 1" style="color:#909399;">
            未开始
          </span>
          <span v-if="scope.row.status == 2" style="color:#67C23A;">
            进行中
          </span>
          <span v-if="scope.row.status == 3" style="color:#F56C6C;">
            结束
          </span>
        </template>
      </el-table-column>
      <el-table-column label="活动时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.stime }} 至 {{ scope.row.etime }}
        </template>
      </el-table-column>
      <el-table-column
        label="活动商品（件）"
        align="center"
        property="goods"
      ></el-table-column>
      <el-table-column
        label="商品浏览量"
        align="center"
        property="brows"
      ></el-table-column>
      <el-table-column
        label="支付单数"
        align="center"
        property="downorder"
      ></el-table-column>
      <el-table-column
        label="操作"
        align="center"
        fixed="right"
        width="250"
        class-name="tableoperation"
      >
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="bianji(scope.row)">
            编辑活动
          </el-button>
          <el-button
            size="mini"
            type="text"
            @click="manage(scope.row.limit_id)"
          >
            管理商品
          </el-button>
          <el-button
            v-if="scope.row.status == 1"
            size="mini"
            type="text"
            @click="del('start', scope.row.limit_id)"
          >
            立即开始
          </el-button>
          <el-button
            v-if="scope.row.status == 2"
            size="mini"
            type="text"
            @click="del('end', scope.row.limit_id)"
          >
            立即结束
          </el-button>
          <el-button
            v-if="scope.row.status == 3"
            size="mini"
            type="text"
            @click="del('delete', scope.row.limit_id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </Main>
    <Footer :total="totals">
      <el-pagination
        :page-size="10"
        layout="prev, pager, next"
        :total="totals"
        @current-change="changes"
      >
      </el-pagination>
    </Footer>
  </div>
</template>
<script>
import { LIMITCODE, DELETECODE } from "../service";
export default {
  name: "LimitList",
  data() {
    return {
      optionList: [
        { id: 1, name: "未开始" },
        { id: 2, name: "进行中" },
        { id: 3, name: "已结束" }
      ],
      Url: this.$store.state.qiniu,
      select1: "活动状态",
      input: "",
      show: false,
      delcode: 1,
      timeval: "",
      totals: 0,
      listcode: [],
      pages: 1,
      item: [],
      pagesSize: 10
    };
  },
  created() {
    this.getList();
  },
  methods: {
    changes(page) {
      this.pages = page;
      this.getList();
    },
    activity() {
      this.$router.push("/activity");
    },
    manage(limitid) {
      this.$router.push({ path: "/shopmanage?limit_id=" + limitid });
    },
    bianji(item) {
      this.item = item;
      this.$router.push({ path: "/bianji?item=" + JSON.stringify(item) });
    },
    reset() {
      this.input = "";
      this.select1 = "";
      this.timeval = [];
      this.getList();
    },
    async getList() {
      await LIMITCODE({
        search: this.input,
        status: this.select1,
        stime: this.timeval[0],
        etime: this.timeval[1],
        page: this.pages,
        pageshow: 10
      }).then(res => {
        if (res.code === 200) {
          this.totals = res.data.count;
          this.listcode = res.data.list;
          this.$message(res.msg);
        } else {
          this.show = true;
          this.listcode = [];
        }
      });
    },
    async del(flag, id) {
      await DELETECODE({
        limit_id: id,
        flag: flag
      }).then(res => {
        if (res.code === 200) {
          this.$message(res.msg);
        }
        this.getList();
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.limit {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  .limit-header {
    height: 54px;
    line-height: 54px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 35px;
    background-color: rgba(255, 255, 255, 1);
    font-family: "PingFangSC-Regular", "PingFang SC";
    font-weight: 400;
    font-size: 14px;
  }
  .limit-nav {
    width: 97%;
    margin-left: 30px;
    height: 68px;
    background: inherit;
    background-color: rgba(241, 241, 241, 1);
    border: none;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    .limit-btn {
      display: flex;
      justify-content: space-around;
      width: 45%;
      margin-left: 20px;
      padding-top: 14px;
      color: #606266;
    }
    .limit-search {
      width: 15%;
      margin-top: 14px;
      margin-right: 15px;
    }
  }
  .limit-list {
    width: 97%;
    margin-left: 30px;
    height: 150px;
    background: inherit;
    background-color: rgba(241, 241, 241, 1);
    border: none;
    border-radius: 10px;
    margin-top: 15px;
    display: flex;
    .list-left {
      font-size: 12px;
      font-weight: 400;
      display: flex;
      padding-top: 30px;
      margin-left: 30px;
      color: #333333;
      width: 80%;
      .left {
        display: flex;
        .left-img {
          width: 85px;
          height: 85px;
          position: relative;
        }
        .left-net {
          margin-left: 15px;
          line-height: 20px;
        }
      }
    }
    .list-right {
      font-size: 12px;
      font-weight: 400;
      color: #333333;
      padding-top: 30px;
      .right {
        line-height: 34px;
        height: 100px;
        width: 200px;
        border-left: 1px solid gainsboro;
        > div {
          margin-left: 15px;
        }
      }
    }
  }
  .footer {
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 100%;
    height: 90px;
    line-height: 76px;
    text-align: center;
    background: #ffffff;
    box-shadow: 0 -2px 3px 0 rgba(0, 0, 0, 0.12);
    -moz-box-shadow: 0 -2px 3px 0 rgba(0, 0, 0, 0.12);
    -webkit-box-shadow: 0 -2px 3px 0 rgba(0, 0, 0, 0.12);
    border: 1px solid #e0e0e0;
    border-radius: 10px 10px 0 0;
    z-index: 100;
  }
}
#limit .crile {
  position: absolute;
  right: 0px;
  color: #fff;
  background: rgba(89, 202, 3, 1);
  line-height: 20px;
  text-align: center;
  width: 46px;
  border-bottom-left-radius: 10px;
}
#limit .open {
  position: absolute;
  right: 0px;
  color: #fff;
  background: rgba(255, 80, 80, 1);
  line-height: 20px;
  text-align: center;
  width: 46px;
  border-bottom-left-radius: 10px;
}
#limit .end {
  position: absolute;
  right: 0px;
  color: #fff;
  background: rgba(202, 202, 202, 1);
  line-height: 20px;
  text-align: center;
  width: 46px;
  border-bottom-left-radius: 10px;
}
</style>
